const About = () => {
  const milestones = [
    {
      year: "2010",
      title: "公司成立",
      description: "家具商城正式成立，专注于高品质家具的设计与制造。"
    },
    {
      year: "2012",
      title: "首家门店开业",
      description: "在北京开设首家实体门店，为客户提供现场体验服务。"
    },
    {
      year: "2015",
      title: "拓展产品线",
      description: "引入定制家具服务，满足客户个性化需求。"
    },
    {
      year: "2018",
      title: "线上平台上线",
      description: "推出官方网站和在线商城，实现线上线下融合发展。"
    },
    {
      year: "2020",
      title: "全国连锁",
      description: "在全国主要城市开设20家连锁门店，服务范围覆盖全国。"
    },
    {
      year: "2023",
      title: "技术创新",
      description: "引入3D可视化技术，客户可在线预览家具效果。"
    }
  ];

  const teamMembers = [
    { name: "李明", position: "创始人兼CEO", image: "member1" },
    { name: "王芳", position: "设计总监", image: "member2" },
    { name: "张伟", position: "生产总监", image: "member3" },
    { name: "陈丽", position: "市场总监", image: "member4" }
  ];

  return (
    <div className="container mx-auto px-4 py-8">
      {/* Hero Section */}
      <section className="bg-gradient-to-r from-blue-500 to-purple-600 rounded-xl text-white p-8 mb-12">
        <div className="max-w-3xl mx-auto text-center">
          <h1 className="text-4xl font-bold mb-4">关于我们</h1>
          <p className="text-xl">
            致力于为每个家庭创造舒适、美观的居住环境，提供高品质的家具产品和定制服务。
          </p>
        </div>
      </section>

      {/* Company Story */}
      <section className="mb-12">
        <h2 className="text-3xl font-bold text-center mb-8">我们的故事</h2>
        <div className="bg-white rounded-lg shadow-md p-8">
          <p className="text-gray-700 text-lg mb-6">
            家具商城成立于2010年，是一家专注于高品质家具设计、制造和销售的企业。
            我们拥有一支经验丰富的设计团队和精湛的工艺师团队，致力于为客户打造舒适、美观的家居环境。
          </p>
          <p className="text-gray-700 text-lg mb-6">
            多年来，我们始终坚持"品质第一、客户至上"的理念，采用环保材料和先进工艺，
            确保每一件产品都符合最高的质量标准。我们的产品涵盖了客厅、卧室、餐厅、书房等各个空间，
            满足不同客户的需求。
          </p>
          <p className="text-gray-700 text-lg">
            随着时代的发展，我们不断创新，引入了3D可视化技术，让客户可以在线预览家具在家中的效果，
            并提供个性化定制服务，真正实现"所见即所得"。
          </p>
        </div>
      </section>

      {/* Milestones */}
      <section className="mb-12">
        <h2 className="text-3xl font-bold text-center mb-8">发展历程</h2>
        <div className="relative">
          {/* Timeline line */}
          <div className="absolute left-1/2 transform -translate-x-1/2 h-full w-1 bg-blue-200"></div>
          
          <div className="space-y-12">
            {milestones.map((milestone, index) => (
              <div 
                key={index} 
                className={`relative flex ${
                  index % 2 === 0 ? "flex-row" : "flex-row-reverse"
                } items-center`}
              >
                {/* Year badge */}
                <div className="absolute left-1/2 transform -translate-x-1/2 w-24 h-24 rounded-full bg-blue-500 flex items-center justify-center text-white font-bold text-xl z-10">
                  {milestone.year}
                </div>
                
                {/* Content */}
                <div className={`w-1/2 ${index % 2 === 0 ? "pr-16 text-right" : "pl-16"}`}>
                  <div className="bg-white rounded-lg shadow-md p-6">
                    <h3 className="text-2xl font-semibold mb-2">{milestone.title}</h3>
                    <p className="text-gray-700">{milestone.description}</p>
                  </div>
                </div>
                
                {/* Empty div for spacing */}
                <div className="w-1/2"></div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Team */}
      <section className="mb-12">
        <h2 className="text-3xl font-bold text-center mb-8">我们的团队</h2>
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
          {teamMembers.map((member, index) => (
            <div key={index} className="bg-white rounded-lg shadow-md overflow-hidden text-center">
              <div className="bg-gray-200 h-64 flex items-center justify-center">
                <span className="text-gray-500">团队成员照片</span>
              </div>
              <div className="p-6">
                <h3 className="text-xl font-semibold mb-1">{member.name}</h3>
                <p className="text-gray-600">{member.position}</p>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* Contact */}
      <section>
        <h2 className="text-3xl font-bold text-center mb-8">联系我们</h2>
        <div className="bg-white rounded-lg shadow-md p-8">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div className="text-center">
              <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
                <svg className="w-8 h-8 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
                </svg>
              </div>
              <h3 className="text-xl font-semibold mb-2">电话</h3>
              <p className="text-gray-700">400-123-4567</p>
            </div>
            
            <div className="text-center">
              <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
                <svg className="w-8 h-8 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                </svg>
              </div>
              <h3 className="text-xl font-semibold mb-2">邮箱</h3>
              <p className="text-gray-700">info@furnitureshop.com</p>
            </div>
            
            <div className="text-center">
              <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
                <svg className="w-8 h-8 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
                </svg>
              </div>
              <h3 className="text-xl font-semibold mb-2">地址</h3>
              <p className="text-gray-700">北京市朝阳区家具大厦123号</p>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
};

export default About;